<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
</head>
<body>
<div class="layui-container">
    <h2>教师管理</h2>

    <!-- 新增教师按钮 -->
    <button class="layui-btn" id="addTeacher">新增教师</button>

    <!-- 教师信息表格 -->
    <table class="layui-table" id="teacherTable">
        <thead>
        <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<!-- 新增教师表单 -->
<div id="teacherForm" style="display:none;">
    <form class="layui-form" id="formTeacher">
        <div class="layui-form-item">
            <label class="layui-form-label">工号</label>
            <div class="layui-input-block">
                <input type="text" name="id" required  lay-verify="required" placeholder="请输入工号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="saveTeacher">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/l
ayui-src/dist/layui.js"></script>
<script>
    layui.use(['jquery', 'form', 'layer'], function() {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;

        // 显示新增教师表单
        $('#addTeacher').on('click', function() {
            layer.open({
                type: 1,
                title: '新增教师',
                area: ['500px', '400px'],
                content: $('#teacherForm')
            });
        });

        // 保存教师信息
        $('#saveTeacher').on('click', function(e) {
            e.preventDefault();
            var formData = $('#formTeacher').serialize();
            $.ajax({
                url: '/api/teacher/add',
                type: 'POST',
                data: formData,
                success: function(response) {
                    if (response.success) {
                        layer.msg('新增成功');
                        location.reload();
                    } else {
                        layer.msg('新增失败');
                    }
                }
            });
        });

        // 渲染教师表格
        function loadTeachers() {
            $.ajax({
                url: '/api/teacher/list',  // 替换为后端API地址
                type: 'GET',
                success: function(response) {
                    var tbody = $('#teacherTable tbody');
                    tbody.empty();  // 清空表格
                    $.each(response.data, function(index, teacher) {
                        var row = '<tr>' +
                            '<td>' + teacher.id + '</td>' +
                            '<td>' + teacher.name + '</td>' +
                            '<td>' + teacher.sex + '</td>' +
                            '<td><button class="layui-btn layui-btn-xs">编辑</button>' +
                            '<button class="layui-btn layui-btn-danger layui-btn-xs">删除</button></td>' +
                            '</tr>';
                        tbody.append(row);
                    });
                }
            });
        }

        // 页面加载时加载教师列表
        loadTeachers();
    });
</script>
</body>
</html>
